<template>
    <div class="login-vue" :style="bg">
        <b-container class="bv-example-row row-box">
            <b-row align-h="center">
                <b-col cols="12" sm="12" md="5" lg="5" class="login-contain">
                    <div class="logo-info">
                        <router-link to="/"><img :src="logo" alt=""></router-link>
                    </div>
                    <div class="login-item">
                        <Tabs value="name1">
                            <TabPane label="登录" name="name1">
                                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                                    <FormItem prop="identifier">
                                        <Input v-model="formValidate.identifier" placeholder="请输入手机号/邮箱" />
                                    </FormItem>
                                    <FormItem prop="credential">
                                        <Input type="password" v-model="formValidate.credential" placeholder="请输入密码"/>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary" @click="loginByIdentifierAndCredential('formValidate')" long>登录</Button>
                                    </FormItem>
                                </Form>
                                <div class="extra">
                                    <p>
                                        <router-link to="/forgetPwd">忘记密码？</router-link>
                                    </p>
                                    <p>
                                        <span>尚未拥有账户?</span>
                                        <router-link to="/register"> 注册</router-link>
                                    </p>
                                </div>
                            </TabPane>
                            <TabPane label="手机快速登录" name="name2">
                                <Form ref="formValidatePhone" :model="formValidatePhone" :rules="ruleValidatePhone">
                                    <FormItem prop="phone">
                                        <Input v-model="formValidatePhone.phone" placeholder="请输入手机号" />
                                    </FormItem>
                                    <FormItem prop="code">
                                        <Row>
                                            <i-col span="18">
                                                <Input type="text" v-model="formValidatePhone.code" placeholder="请输入验证码" />
                                            </i-col>
                                            <i-col span="5" offset="1">
                                                <Button @click="sendPhoneCode" :disabled="isDisable">{{send}}</Button>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary" @click="loginByPhoneAndCode('formValidatePhone')" long>登录</Button>
                                    </FormItem>
                                </Form>
                                <div class="extra">
                                    <p><router-link to="/forgetPwd">忘记密码？</router-link></p>
                                    <p>
                                        <span>尚未拥有账户?</span>
                                        <router-link to="/register"> 注册</router-link>
                                    </p>
                                </div>
                            </TabPane>
                            <TabPane label="邮箱快速登录" name="name3">
                                <Form ref="formValidateEmail" :model="formValidateEmail" :rules="ruleValidateEmail">
                                    <FormItem prop="email">
                                        <Input v-model="formValidateEmail.email" placeholder="请输入邮箱号" />
                                    </FormItem>
                                    <FormItem prop="code">
                                        <Row>
                                            <i-col span="18">
                                                <Input type="text" v-model="formValidateEmail.code" placeholder="请输入验证码" />
                                            </i-col>
                                            <i-col span="5" offset="1">
                                                <Button @click="sendEmailCode" :disabled="isDisableEmail">{{sendEmail}}</Button>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem>
                                        <Button type="primary" @click="loginByEmailAndCode('formValidateEmail')" long>登录</Button>
                                    </FormItem>
                                </Form>
                                <div class="extra">
                                    <p><router-link to="/forgetPwd">忘记密码？</router-link></p>
                                    <p>
                                        <span>尚未拥有账户?</span>
                                        <router-link to="/register"> 注册</router-link>
                                    </p>
                                </div>
                            </TabPane>
                        </Tabs>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            logo: require('../assets/imgs/logo2.png'),
            bg: {},
            isDisable: false,
            send: 'send',
            isDisableEmail: false,
            sendEmail: 'send',
            // 识别标识密码验证
            formValidate: {
                identifier: '',
                credential: '',
            },
            ruleValidate: {
                identifier: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                ],
                credential: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { type: 'string', min: 6, message: '请注意密码不少于6位', trigger: 'blur' },
                ],
            },
            // 手机号验证
            formValidatePhone: {
                phone: '',
                code: '',
            },
            ruleValidatePhone: {
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                ],
            },
            // 邮箱号验证
            formValidateEmail: {
                email: '',
                code: '',
            },
            ruleValidateEmail: {
                email: [
                    { required: true, message: '邮箱号不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    created() {
        this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
    },
    methods: {
        // 根据识别标识和密码凭证登录
        loginByIdentifierAndCredential(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userLoginAuths/loginByIdentifierAndCredential',
                        method: 'get',
                        params: {
                            identifier: this.formValidate.identifier,
                            credential: this.formValidate.credential,
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            // 登录成功，保存用户信息-根据用户角色跳转至不同主页
                            localStorage.setItem('user', JSON.stringify(res.data.object))
                            localStorage.setItem('token', res.data.token)
                            if (res.data.object.uRole === 'admin') {
                                this.$router.push({ path: '/admin/home' })
                            } else if (res.data.object.uRole === 'user' || res.data.object.uRole === 'business') {
                                // 使用JS的形式，进行路由导航
                                this.$router.push({ path: '/' })
                            }
                        } else if (res.data.code === 401) {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        // 发送短信验证码之前判断 identifier 是否存在
        sendPhoneCode() {
            this.$axios({
                url: 'userLoginAuths/checkIdentifier',
                method: 'get',
                params: {
                    identifier: this.formValidatePhone.phone,
                },
            }).then(res => {
                // 为 false 说明identifier存在可 发送验证码
                if (res.data === false) {
                    this.$axios({
                        url: 'userLoginAuths/postMsg',
                        method: 'get',
                        params: {
                            Phone: this.formValidatePhone.phone,
                        },
                    }).then(result => {
                        if (result.data === true) {
                            // 发送验证码倒计时60s
                            let second = 60
                            let timer = null
                            timer = setInterval(() => {
                                second -= 1
                                if (second > 0) {
                                    this.send = `${second} s`
                                    this.isDisable = true
                                } else {
                                    clearInterval(timer)
                                    this.send = 'send'
                                    this.isDisable = false
                                }
                            }, 1000)
                        } else {
                            this.$Message.error('验证码发送失败!')
                        }
                    })
                } else {
                    this.$Message.error('手机号错误或未被注册!')
                }
            })
        },
        // 根据手机号和验证码登录
        loginByPhoneAndCode(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userLoginAuths/loginByPhoneAndCode',
                        method: 'get',
                        params: {
                            phone: this.formValidatePhone.phone,
                            code: this.formValidatePhone.code,
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            // 登录成功，保存用户信息-根据用户角色跳转至不同主页
                            localStorage.setItem('user', JSON.stringify(res.data.object))
                            localStorage.setItem('token', res.data.token)
                            if (res.data.object.uRole === 'admin') {
                                this.$router.push({ path: '/admin/home' })
                            } else if (res.data.object.uRole === 'user' || res.data.object.uRole === 'business') {
                                // 使用JS的形式，进行路由导航
                                this.$router.push({ path: '/' })
                            }
                        } else if (res.data.code === 400) {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        // 发送邮箱验证码之前判断 identifier 是否存在
        sendEmailCode() {
            this.$axios({
                url: 'userLoginAuths/checkIdentifier',
                method: 'get',
                params: {
                    identifier: this.formValidateEmail.email,
                },
            }).then(res => {
                // 为 false 说明identifier存在可 发送验证码
                if (res.data === false) {
                    this.$axios({
                        url: 'userLoginAuths/sendMail',
                        method: 'get',
                        params: {
                            email: this.formValidateEmail.email,
                        },
                    }).then(result => {
                        if (result.data === true) {
                            // 发送验证码倒计时60s
                            let second = 60
                            let timer = null
                            timer = setInterval(() => {
                                second -= 1
                                if (second > 0) {
                                    this.sendEmail = `${second} s`
                                    this.isDisableEmail = true
                                } else {
                                    clearInterval(timer)
                                    this.sendEmail = 'send'
                                    this.isDisableEmail = false
                                }
                            }, 1000)
                        } else {
                            this.$Message.error('验证码发送失败!')
                        }
                    })
                } else {
                    this.$Message.error('邮箱号错误或未被注册!')
                }
            })
        },
        // 根据邮箱号和验证码登录
        loginByEmailAndCode(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userLoginAuths/loginByEmailAndCode',
                        method: 'get',
                        params: {
                            email: this.formValidateEmail.email,
                            code: this.formValidateEmail.code,
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            // 登录成功，保存用户信息-根据用户角色跳转至不同主页
                            localStorage.setItem('user', JSON.stringify(res.data.object))
                            localStorage.setItem('token', res.data.token)
                            if (res.data.object.uRole === 'admin') {
                                this.$router.push({ path: '/admin/home' })
                            } else if (res.data.object.uRole === 'user' || res.data.object.uRole === 'business') {
                                // 使用JS的形式，进行路由导航
                                this.$router.push({ path: '/' })
                            }
                        } else if (res.data.code === 400) {
                            this.$Message.error(res.data.msg)
                        }
                    })
                }
            })
        },
    },
}
</script>

<style>
.login-item{
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
}
.logo-info a{
    display:block;
    text-align: center;
}
.logo-info a img{
    width: 280px;
    height: 80px;
    margin-bottom: 20px;
}
.extra{
    text-align: center;
}
.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
</style>
